<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type="number"] {
            font-size: 3em;
            width: 200px;
            height: 50px;
            border-radius: 10px;
            outline: none;
        }

        /**伪类可以拼接 存在多个*/
        input[type="number"]:out-of-range:focus {
            background: #f00;
        }

        input[type="number"]:out-of-range + h4::after {
            content: '超出范围';
        }

        input[type="checkbox"] {
            margin: auto 100px 40px auto;
            width: 100px;
            height: 100px;
        }

        input[type="checkbox"]::after {
            content: '已勾选';
            display: none;
            width: 150px;
            height: 50px;
            margin-left: 110px;
        }

        /**伪元素只能在最后面*/
        input[type="checkbox"]:checked::after {
            display: block;
        }

        li {
            margin: auto auto auto 30px;
        }

        li:nth-child(2n + 1) {
            color: #00bcd4;
        }

        p::first-letter {
            color: #00bcd4;
        }

        /**伪类基于dom 伪元素创建新对象*/
    </style>
</head>
<body>
    <span>请输入数字:</span>
    <input type="number" min="1" max="10"/>
    <h4></h4>

    <input type="checkbox">
    <input type="checkbox">
    <input type="checkbox">

    <ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>

    <p>一二三四五</p>
</body>
</html>